import React, { Component } from 'react'
import {Form, Button, Input, List} from 'antd'
import {connect} from 'react-redux'
import {createAddPersonAction} from '../../redux/actions/person'
class PersonUI extends Component {
  onFinish = value => {
    console.log(this.props);
    const {persons} = this.props
    const person = {
      id: persons.length+1,
      ...value
    }
    console.log(person);
    this.props.addPerson(person)
    this.refs.form.resetFields()
  }
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>Person组件</h1>
        <h3>上方求和为{this.props.count}</h3>
        <Form ref="form" layout="inline" onFinish={this.onFinish}>
          <Form.Item
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入姓名',
              }
            ]}
          >
            <Input
              placeholder="请输入姓名"
              allowClear
            />
          </Form.Item>
          <Form.Item
            label="年龄"
            name="age"
            rules={[
              {
                required: true,
                message: '请输入年龄',
              }
            ]}
          >
            <Input
              placeholder="请输入年龄"
              allowClear
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
            >添加</Button>
          </Form.Item>
        </Form>
        <List
          header={<div>用户列表</div>}
          bordered
          style={{width:400+'px'}}
          dataSource={this.props.persons}
          renderItem={item => (
            <List.Item key={item.id}>
              <div>姓名：{item.name}</div>
              <div>年龄：{item.age}</div>
            </List.Item>
          )}
        >
        </List>
      </div>
    )
  }
}
const PersonContainer = connect(
  state => ({persons: state.persons, count: state.count}),
  {
    addPerson: createAddPersonAction
  }
)(PersonUI)
export default PersonContainer
